<script setup>
	import { useCartStore } from '@/store/cart';

	// 完善 props 定义
	const props = defineProps( {
		type: {
			type: Number,
			default: 0 // 0: 默认样式, 1: 首页样式，仅用于控制高度
		},
		buttonText: {
			type: String,
			default: '提交订单'
		}
	} )

	// 购物车store
	const cartStore = useCartStore( )

	// 提交订单 - 统一跳转到确认订单页
	const submitOrder = ( ) => {
		uni.navigateTo( {
			url: "/pages/order/confirmOrder"
		} )
	}
</script>

<template>
	<view class="footer" :class="{ 'footer-index': props.type === 1 }">
		<view class="footer-left">
			<!-- 购物车 -->
			<view class="cartIcon">
				<up-badge type="error" :absolute="true" :offset="[-6,-8]" max="99"
					:value="cartStore.totalCount"></up-badge>
				<up-icon name="shopping-cart" color="#ed544f" size="26"></up-icon>
			</view>
			<view class="total">
				<up-text size="14" text="合计:"></up-text>
				<up-text mode="price" size="14" :text="cartStore.totalPrice" color="#ed544f"></up-text>
			</view>
		</view>
		<view class="ready">
			<view class="btn" @tap="submitOrder">
				{{ props.buttonText }}
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	/*底部*/
	.footer {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 16rpx 24rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid $line-color-aux;
		z-index: 999;
		height: fit-content; // 默认高度

		.footer-left {
			display: flex;
			align-items: center;

			.cartIcon {
				position: relative;
				margin-right: 16rpx;
				padding: 16rpx;
				height: fit-content;
				background-color: $card-bg-color;
				border-radius: 16rpx;
			}

			.total {
				display: flex;
			}
		}

		.ready {
			.btn {
				width: 200rpx;
				height: 70rpx;
				background-color: $brand-theme-color;
				color: #fff;
				border-radius: 80rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}

	.footer-index {
		height: 82px; // 首页特殊高度
	}
</style>